<template>
  <div class="bg-color" v-show="addUser">
    <div class="md-list">
      <div class="md-ct">
        <span>卡号</span>
        <span class="mdColor">|</span>
        <input type="text" maxlength="16" v-model="addAll.newNumber" placeholder="请输入智能卡号" value=""
        onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
        onafterpaste="this.value=this.value.replace(/[^\d]/g,'') ">
      </div>
      <div class="md-ct">
        <span>别名</span>
        <span class="mdColor">|</span>
        <input type="text"   v-model="addAll.remark" placeholder="例如：我家"  value="">
      </div>
    </div>
    <div class="lst-fd" @click="confirmShow">
      <button type="button"><span>绑定用户</span></button>
    </div>
  </div>

  <div class="bg-gray" v-show="addConfirm">
    <div class="ct-confirm">
      <div class="title">
        <span @click="manageBt">X</span>
        <p>绑定信息</p>
      </div>

      <div class="ct-list">
        <div class="list">
          <span>智能卡号：</span>
          <span>{{ message.intelligentNo }}</span>
        </div>

        <div class="list">
          <span>姓名：</span>
          <span>{{ message.customerName }}</span>
        </div>

        <div class="list">
          <span>手机号：</span>
          <span>{{ message.mPhone }}</span>
        </div>

        <div class="list">
          <span>地址：</span>
          <span>{{ message.address }}</span>
        </div>
      </div>

      <div class="lst-fd">
        <button type="button" @click="payment"><span>确定</span></button>
      </div>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        addUser: true,
        addConfirm: false,
        message: {},
        addAll: {
          newNumber: "",
          remark: "",
          type: "0"
        }
      };
    },
    methods: {
      manageBt() {
        this.addConfirm = false;
      },
      async confirmShow() {
        let checkAcc = await AJAX.checkAcc("intelligentNo=" + this.addAll.newNumber);
        if (checkAcc.resCode === "3333") {
          alert("此卡号" + checkAcc.resMsg + "，请输入正确卡号！");
          return;
        } else {
          this.message = checkAcc.resInfo;
          this.addConfirm = true;
        }
      },
      async payment() {
        let addAcc = await AJAX.addAcc({
          openid: "openid=" + this.$root.openId,
          intelligentNo: "intelligentNo=" + this.addAll.newNumber,
          remarkName: "remarkName=" + this.addAll.remark,
          isActive: "isActive=" + this.addAll.type
        });
        if (addAcc.resCode === "1111") {
          alert(addAcc.resMsg + "，请重新输入");
          this.addConfirm = false;
          return;
        } else {
          this.$route.router.go('/');
        }
      }
    },
    ready() {
      this.addAll.newNumber = this.addAll.newNumber.replace(/[^\d]/g, '');
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .bg-color{
    position: absolute;
    width:100%;
    height: 100%;
    color:#404040;
    font-size: .8rem;
    background-color: #EBEBEB;
    .md-ct{
      margin-bottom: .8rem;
      padding:.5rem;
      background-color: #fff;
      .mdColor{
        color:#E6E6E6;
        padding:0 .2rem;
      }
    }
  }
  .lst-fd button{
    padding: .5rem 0;
    width:90%;
    margin-left:5%;
    margin-top: 1.5rem;
    border-radius: .3rem;
    margin-bottom: .5rem;
    background-color: #15A1D6;
    text-align: center;
    color:#fff;
  }

  .bg-gray{
    position: absolute;
    width:100%;
    height: 100%;
    color:#404040;
    background: rgba(0, 0, 0, .5);
    font-size: .6rem;
    .ct-confirm{
      background-color: #fff;
      margin:3rem 2rem;
      border-radius: .3rem;
      .title{
        border-bottom: 1px solid #E6E6E6;
        text-align: center;
        height: 2.2rem;
        padding-top: .3rem;
        position: relative;
        vertical-align:middle;
        span{
          position: absolute;
          width:2rem;
          height:1.5rem;
          left:1rem;
          font-size: 1rem;
          text-align: left;
        }
      }

      .ct-list{
        margin:0 .3rem;
        .list{
          border-bottom: 1px solid #E6E6E6;
          padding:.5rem .3rem;
          height:2rem;
          span:first-of-type{
            float: left;
            width:36%;
          }
          span:last-of-type{
            float: right;
            width:64%;
            text-align: right;
            vertical-align: top;
          }
        }
        .list:last-child{
          border: none;
        }
      }
    }
  }
</style>
